<script setup lang="ts">
import type { TreeSelectProps } from 'ant-design-vue';

import { onMounted, ref } from 'vue';

import { TreeSelect } from 'ant-design-vue';

import { loadOrganizationDepartmentPageApi } from '#/api';

defineOptions({
  name: 'OrganizationDepartmentTreeSelect',
});

const treeData = ref<TreeSelectProps['treeData']>([]);
const modelValue = defineModel<any>();

onMounted(async () => {
  const result = await loadOrganizationDepartmentPageApi({
    searchCount: false,
    current: 1,
    size: 500,
  });
  treeData.value = result.records.map((item: any) => ({
    id: item.departmentId,
    label: item.departmentName,
    value: item.departmentId,
    pId: item.parentId,
  }));
});
</script>
<template>
  <TreeSelect
    v-model:value="modelValue"
    :allow-clear="true"
    :placeholder="$t('common.placeholder.select')"
    :tree-data="treeData"
    class="min-w-60"
    tree-data-simple-mode
  />
</template>
